<template>
  <!-- 歌手 筛选组件 -->
  <div class="star-filter">
    <ul class="letter-filter">
      <li
        :class="idx === activeIdx[0] ? 'active' : ''"
        class="filter-item"
        v-for="(l, idx) in getAZ"
        :key="idx"
        v-text="l"
        @click="changeActiveIdx(0, idx)"
      ></li>
    </ul>
    <ul class="area-filter">
      <li
        :class="idx === activeIdx[1] ? 'active' : ''"
        class="filter-item"
        v-for="(area, idx) in areas"
        :key="idx"
        v-text="area"
        @click="changeActiveIdx(1, idx)"
      ></li>
    </ul>
    <ul class="team-filter">
      <li
        :class="idx === activeIdx[2] ? 'active' : ''"
        class="filter-item"
        v-for="(team, idx) in teams"
        :key="idx"
        v-text="team"
        @click="changeActiveIdx(2, idx)"
      ></li>
    </ul>
  </div>
</template>

<script>
import { m_filter } from "@/mixin";
export default {
  name: "StarFilter",
  mixins: [m_filter],
  data() {
    return {
      areas: ["全部", "内地", "港台", "欧美", "韩国", "日本", "其他"],
      teams: ["全部", "男", "女", "组合", "乐队"],
    };
  },
  computed: {
    /* 获取26个大写英文字母 */
    getAZ() {
      const arr = ["全部"];
      for (let i = 0; i < 26; i++) {
        const letter = String.fromCharCode(65 + i);
        arr.push(letter);
      }
      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
.star-filter {
  .letter-filter,
  .area-filter,
  .team-filter {
    display: flex;
    margin-top: 0.3rem;
    flex-wrap: wrap;
    .filter-item {
      &:first-child {
        margin-left: 0;
      }
      margin-top: 0.1rem;
      margin-left: 0.3rem;
      cursor: pointer;
      transition: all 0.5s;
      height: 0.5rem;
      width: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.2rem;
      background: linear-gradient(to top, #2c5364, #203a43, #0f2027);
      &:hover {
        color: #ffcff1;
        background: #2c5364;
      }
      &.active {
        color: #ffcff1;
        background: #2c5364;
      }
    }
  }
  .letter-filter {
    margin-top: 0;
  }
}
</style>